<template>
	<view class="">
		<view class="gl-header">
			<view class="gl-header-left">
				<uni-search-bar v-model="search" placeholder="关键字搜索" cancelButton="none"
					@confirm="getSearch"></uni-search-bar>
			</view>
			<view class="gl-header-right">
				<view class="gl-button gl-button-success" @tap="EventButtonNew">
					<uni-icons type="folder-add" size="18" color="#fff"></uni-icons>
					<text style="font-size: small;">新增</text>
				</view>
				<!--
						<view class="gl-button gl-button-warning" @tap="EventButtonEdit">
							<uni-icons type="compose" size="18" color="#fff"></uni-icons>
							<text style="font-size: small;">编辑</text>
						</view>
				-->
				<view class="gl-button gl-button-error" @tap="EventTest">
					<uni-icons type="trash" size="18" color="#fff"></uni-icons>
					<text style="font-size: small;">移除</text>
				</view>

				<view class="gl-button gl-button-base" hover-class="button-base-hover" :hover-stay-time="100"
					@click="refresh">
					<uni-icons type="reload" size="18" color="#fff"></uni-icons>
					<text style="font-size: small;">刷新</text>
				</view>
				<uni-icons :type=" showLine?'images':'list'" size="24" @tap="lineChange"></uni-icons>
			</view>
		</view>


		<view v-if="showLine" class="gl-body table-container" style="background-color: #f8f8f8;font-size: x-small;"
			:style="{height:swiperH+'px'}">
			<uni-table type="selection" emptyText="暂无更多数据" @selection-change="EventChangePlace">
				<uni-tr class="table-head">
					<uni-th align="center" width="30">ID</uni-th>
					<uni-th>名称</uni-th><uni-th>省</uni-th><uni-th>市</uni-th><uni-th>县</uni-th>
					<uni-th width="48">热度</uni-th>
					<uni-th width="48">状态</uni-th>
					<uni-th width="48">认证</uni-th>
					<uni-th>管理员</uni-th>
					<uni-th>连锁</uni-th>
					<uni-th>创建时间</uni-th>
					<uni-th>操作</uni-th>
				</uni-tr>
				<uni-tr v-for="(item,index) in placeData" :key="index">
					<uni-td>{{item.id}}</uni-td>
					<uni-td>{{item.nicename}}</uni-td>
					<uni-td>{{item.sheng}}</uni-td>
					<uni-td>{{item.shi}}</uni-td>
					<uni-td>{{item.xian}}</uni-td>
					<uni-td>{{item.place_hot+''}}</uni-td>
					<uni-td>
						<switch :checked="Boolean(item.status)" disabled style="transform:scale(0.7)" />
					</uni-td>
					<uni-td>
						<uni-icons v-if="item.place_fee" type="shop-filled" size="24"></uni-icons>
					</uni-td>
					<uni-td>
						<text v-if="item.place_staff">{{item.place_staff.nicename}}</text>
					</uni-td>
					<uni-td>
						<view v-if="item.place_chain">连锁</view>
					</uni-td>
					<uni-td>{{item.created}}</uni-td>
					<uni-td>
						<view style="display: flex;align-items: center;gap: 10px;color: #007aff;font-size: small;">
							<text @tap="EventShowPlace(item)">查看</text>
						</view>
					</uni-td>
				</uni-tr>
			</uni-table>
		</view>
		<scroll-view v-else scroll-y style="width: 100%;">
			<view
				style="display: flex;justify-content: flex-start;flex-wrap: wrap; gap: 10px; background-color: #f1f1f1;border-radius: 10px;padding: 10px;">
				<view v-for="(item,index) in placeData" :key="index"
					style="display: flex;flex-direction: column;align-items: center;background-color: #fff;border-radius: 5px;padding: 5px;">
					<image :src="sConf.cos + item.place_logos" mode="aspectFit"
						style="width: 64px;height: 64px;border-radius: 5px;"></image>
					<text style="font-size: x-small;">{{item.nicename}}</text>
				</view>
			</view>
		</scroll-view>


		<view class="gl-footer">
			<uni-pagination :show-icon="true" :total="count" :pageSize="size" v-model="page" title="翻页"
				@change="refresh" />
		</view>

		<!-- popup弹窗 -->
		<uni-popup ref="placeEditView" type="bottom" border-radius="10px 10px 0 0">
			<view class="gl-popup-view">
				<view class="gl-popup-title">
					<view class=""> 新增商户 </view>
					<uni-icons class="gl-button-mini gl-button-error" type="closeempty" size="18" color="#fff"
						@tap="EventClose"></uni-icons>
				</view>
				<view class="gl-popup-body" style="display: flex;align-items: center;gap: 10px;">
					<view class="">门店昵称:</view>
					<uni-easyinput v-model="newPlaceName" placeholder="请输入门店昵称" />
				</view>
				<view class="gl-popup-foot" style="display: flex;justify-content: flex-end;gap: 10px;">
					<view class="gl-button gl-button-base" @tap="EventNewPlace">
						<uni-icons type="checkmarkempty" size="18" color="#fff"></uni-icons>
						<text style="font-size: small;">保存</text>
					</view>
					<view class="gl-button gl-button-warning" @tap="EventClose">
						<uni-icons type="closeempty" size="18" color="#fff"></uni-icons>
						<text style="font-size: small;">取消</text>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- 消息提示 -->
		<uni-popup ref="popupAlert" type="message">
			<uni-popup-message :type="alertData.type" :message="alertData.content" :duration="2000"></uni-popup-message>
		</uni-popup>
		<!-- 模态对话框 -->
		<uni-popup ref="popupModel" type="dialog">
			<uni-popup-dialog mode="base" :title="alertData.title" :type="alertData.type" :content="alertData.content"
				:duration="2000" :showClose="false"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import utils from '@/common/utils.js'
	import psMethod from '@/common/psMethod';
	export default {
		data() {
			return {
				swiperH: 0,
				sConf: getApp().globalData,
				count: 0, // 记录数
				size: 50, // 页大小
				page: 1, // 当前页					
				search: '',
				showLine: true, // 表格显示
				placeData: [], // 商户数据
				newPlaceName: null, // 新商户昵称
				alertData: {
					type: 'success', // success, warn, error, info
					title: '成功',
					content: '成功'
				},
			}
		},
		mounted() {
			console.log('页面挂载', '商户列表');
			let window = uni.getWindowInfo();
			this.designLayout(window.windowHeight);
			this.loadDefData();
		},
		methods: {
			designLayout(wh) {
				this.$nextTick(() => {
					const query = uni.createSelectorQuery().in(this);
					query.select('.gl-body').boundingClientRect();
					query.select('.gl-footer').boundingClientRect();
					query.exec((res) => {
						this.swiperH = wh - Math.ceil(res[0].top) - Math.ceil(res[1].height) - 10;
					});
				})
			},
			EventTest() {
				console.log('EventTest');
			},
			loadDefData() {
				this.refresh()
			},
			/**
			 * 搜索
			 */
			getSearch(e) {
				console.log('getSearch', e, this.search);
				this.refresh()
			},
			/**
			 * 显示创建
			 */
			EventButtonNew() {
				this.$refs.placeEditView.open('center')
			},
			/**
			 * 关闭弹窗
			 */
			EventClose() {
				this.$refs.placeEditView.close()
			},
			/**
			 * 切换显示模式
			 */
			lineChange() {
				this.showLine = !this.showLine;
			},
			/**
			 * 查看详情-跳转
			 */
			EventShowPlace(e) {
				console.log('EventShowPlace', e);
				this.$emit('showInfo', e)
			},
			/**
			 * 列表多选
			 */
			EventChangePlace(e) {
				console.log('EventChangePlace', e.detail.index);
			},
			/**
			 * 刷新
			 */
			refresh() {
				console.log('refresh');
				let host = this.sConf.host + '/admin/placeList/';
				let token = this.sConf.auth.token || '';
				let data = {
					page: this.page,
					size: this.size,
					ordering: 'id'
				}
				if (this.search.length > 0) {
					data.search = this.search
				}
				psMethod.authenticatorGetSync(host, token, data).then(res => {
					console.log('加载商户列表', res);
					if (res.rescode === 200) {
						this.placeData = res.resmsg;
						this.count = res.count;
						this.size = res.size;
					}
				}).catch(err => {
					console.log('err', err);
					if (err.rescode === 404) {
						this.page--
					}
				});

			},
			/**
			 * 提交新商户
			 */
			EventNewPlace() {
				console.log('EventNewPlace', this.newPlaceName);
				if (!this.newPlaceName) {
					this.alertData.type = 'error';
					this.alertData.title = '错误';
					this.alertData.content = '昵称不能为空'
					this.$refs.popupModel.open()
					return
				}

				let host = this.sConf.host + '/admin/placeList/';
				let token = this.sConf.auth.token || '';
				let data = {
					nicename: this.newPlaceName
				}
				utils.authenticatorPost(host, token, data).then(res => {
					console.log('创建新商户', res);
					if (res.rescode === 200) {
						this.newPlaceName = null
						this.$refs.placeEditView.close()
						this.refresh()
					} else {
						this.alertData.type = 'error';
						this.alertData.title = '请求失败';
						this.alertData.content = res.resmsg;
						this.$refs.popupModel.open()
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	/* 表格垂直滚动 */
	.table-container {
		/* height: 400px; */
		overflow-y: auto;

		::v-deep .uni-table .table-head th {
			font-weight: bold;
			z-index: 2;
			background-color: #fff;
			position: -webkit-sticky;
			position: sticky;
			top: 0;
		}

		::v-deep .uni-table-scroll {
			overflow: visible;
		}
	}
</style>